<template>
    <div>
        <div class="port-style" v-if="power('WSTATISTICS_PORTOVERVIEW_THROUGHPUT')">
            <el-form :inline="true" ref="form" :model="year" class="add-form" label-width="50px"
                     style="position: relative">
                <el-row>
                    <el-col :span="5">
                        <h3>年度吞吐量</h3>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="年份">
                            <el-date-picker v-model="year.search_EQ_dateTime" style="width:150px" type="year"
                                            @change="handleYearTime" value-format="yyyy" placeholder="选择年"
                                            :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <!--<el-form-item label="">-->
                        <!--{{name}}-->
                        <!--&lt;!&ndash; <auto-search-org v-model="onPort.search_EQ_orgId" @selectName="onPortChart" :name="name" :clearable="false"></auto-search-org> &ndash;&gt;-->
                        <!--</el-form-item>-->
                    </el-col>
                </el-row>
                <div style="position: absolute;font-size: 14px;top:0;right: 20px;">
                    单位：TEU
                </div>
                <div style="position: absolute;font-size: 14px;top:35px;right: 400px">
                    总吞吐量：{{ yearNum.totale }}
                </div>
                <div style="position: absolute;font-size: 14px;top:35px;right: 220px">
                    进口量：{{ yearNum.inNum }}
                </div>
                <div style="position: absolute;font-size: 14px;top:35px;right: 40px">
                    出口量：{{ yearNum.outNum }}
                </div>
            </el-form>

            <div id="yearChart" class="chart-style"></div>
        </div>
        <div class="port-style" v-if="power('WSTATISTICS_PORTOVERVIEW_CONTAINERINPORT')">
            <el-form :inline="true" ref="form" :model="onPort" class="add-form" label-width="50px"
                     style="position: relative">
                <el-row>
                    <el-col :span="12">
                        <h3>在港箱数量</h3>
                    </el-col>
                    <el-col :span="12">
                        <!--<el-form-item label="">-->
                        <!--{{name}}-->
                        <!--&lt;!&ndash; <auto-search-org v-model="onPort.search_EQ_orgId" @selectName="onPortChart" :name="name" :clearable="false"></auto-search-org> &ndash;&gt;-->
                        <!--</el-form-item>-->
                    </el-col>
                </el-row>
                <div style="position: absolute;font-size: 14px;top:0;right: 20px;">
                    单位：箱数
                </div>
                <div style="position: absolute;font-size: 14px;top:20px;right: 25px">
                    在港总箱量：{{ inPortNum }}
                </div>
                <!--<div style="position: absolute;font-size: 14px;top:40px;right: 20px">-->
                <!--20尺：TEU-->
                <!--</div>-->
                <!--<div style="position: absolute;font-size: 14px;top:60px;right: 20px">-->
                <!--40尺：TEU-->
                <!--</div>-->
            </el-form>
            <div id="onPortChart" class="chart-style"></div>
        </div>
        <div class="port-style" v-if="power('WSTATISTICS_PORTOVERVIEW_CONTAINERINPORT')">
            <el-form :inline="true" ref="form" :model="week" class="add-form" label-width="50px"
                     style="position: relative">
                <el-row>
                    <el-col :span="6">
                        <h3>本周进出口量</h3>
                    </el-col>
                    <el-col :span="9">
                        <!--<el-form-item label="">-->
                        <!--{{name}}-->
                        <!--&lt;!&ndash; <auto-search-org v-model="onPort.search_EQ_orgId" @selectName="onPortChart" :name="name" :clearable="false"></auto-search-org> &ndash;&gt;-->
                        <!--</el-form-item>-->
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="">
                            {{week.search_GTE_dateTime}} 至 {{week.search_LTE_dateTime}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="position: absolute;font-size: 14px;top:0;right: 20px;">
                    单位：TEU
                </div>
                <div style="position: absolute;font-size: 14px;top:20px;right: 20px">
                    总吞吐量：{{ weekNum }}
                </div>
            </el-form>
            <div id="weekChart" class="chart-style"></div>
        </div>
        <div class="port-style" v-if="power('WSTATISTICS_PORTOVERVIEW_CONTAINERINPORT')">
            <el-form :inline="true" ref="form" :model="day" class="add-form" label-width="50px"
                     style="position: relative">
                <el-row>
                    <el-col :span="6">
                        <h3>昨天进出口量</h3>
                    </el-col>
                    <el-col :span="9">
                        <!--<el-form-item label="">-->
                        <!--{{name}}-->
                        <!--&lt;!&ndash; <auto-search-org v-model="onPort.search_EQ_orgId" @selectName="onPortChart" :name="name" :clearable="false"></auto-search-org> &ndash;&gt;-->
                        <!--</el-form-item>-->
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="">
                            {{day.search_GTE_dateTime}} 至 {{day.search_LTE_dateTime}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="position: absolute;font-size: 14px;top:0;right: 20px;">
                    单位：TEU
                </div>
                <div style="position: absolute;font-size: 14px;top:20px;right: 20px">
                    总吞吐量：{{ dayNum }}
                </div>
            </el-form>
            <div id="dayChart" class="chart-style"></div>
        </div>
        <div class="port-style" style="width: calc(100% - 28px);height: 500px"
             v-if="power('WSTATISTICS_PORTOVERVIEW_CONTAINERINPORT')">
            <el-row type="flex" style="position: relative">
                <h3>货类进出口统计</h3>
                <el-form :inline="true" ref="cargoName" :model="cargoName" class="add-form" label-width="150px">
                    <el-form-item label="进场港日期：">
                        <date-slot :startDate.sync="cargoName['search_GTE_dateTime']"
                                   @selectStart="handleChangeCargo"
                                   @selectEnd="handleChangeCargo"
                                   :endDate.sync="cargoName['search_LTE_dateTime']" dateType="yyyy-MM-dd"
                                   middle="至"></date-slot>
                    </el-form-item>
                    <el-form-item label="单位：">
                        TEU
                    </el-form-item>
                    <el-form-item label="TOP排行：">
                        <el-select @select="handelChangeNum" style="width: 95px" v-model="cargoName['search_EQ_number']"
                                   placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div style="position: absolute;font-size: 14px;top:40px;left: 80px;">
                    总吞吐量：{{ cargoNum.totale }}
                </div>
                <div style="position: absolute;font-size: 14px;top:40px;left: 220px">
                    进口量：{{ cargoNum.inNum }}
                </div>
                <div style="position: absolute;font-size: 14px;top:40px;left: 370px">
                    出口量：{{ cargoNum.outNum }}
                </div>
            </el-row>
            <el-row type="flex">
                <div id="cargoTypeChart" class="chart-style" style="border-right: 1px solid #ddd;height: 400px"></div>
                <div id="cargoNameChart" style="height: 400px" class="chart-style"></div>
            </el-row>
        </div>
        <div class="clear"></div>
    </div>
</template>
<script>
    import {
        getYear,
        getOnPort,
        getWeek,
        getDay,
        portCountCargoType,
        portCountCargoName
    } from "@/api/portCount/portCount";
    import autoSearchOrg from "@/components/autocomplete/autoSearchOrg";
    import { getLocalTime } from "@/utils/dateFormat";
    import dateSlot from '@/components/date/dateSlot'

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入柱状图组件
    require("echarts/lib/chart/bar");
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/pie");
    export default {
        name: "hello",
        components: {
            autoSearchOrg, dateSlot
        },
        data() {
            return {
                name: "",
                year: {
                    search_EQ_dateTime: "2018",
                    search_EQ_orgId: ""
                },
                onPort: {
                    search_EQ_orgId: ""
                },
                week: {
                    search_EQ_orgId: "",
                    search_GTE_dateTime: "",
                    search_LTE_dateTime: ""
                },
                day: {
                    search_EQ_orgId: "",
                    search_GTE_dateTime: "",
                    search_LTE_dateTime: ""
                },
                cargoType: {
                    search_EQ_orgId: "",
                    search_GTE_dateTime: "",
                    search_LTE_dateTime: ""
                },
                cargoName: {
                    search_EQ_orgId: "",
                    search_GTE_dateTime: "",
                    search_LTE_dateTime: "",
                    search_EQ_number: '10'
                },
                options: [{
                    value: '10',
                    label: '10'
                }, {
                    value: '20',
                    label: '20'
                }, {
                    value: '50',
                    label: '50'
                },],
                yearNum: {},
                inPortNum: 0,
                weekNum: 0,
                dayNum: 0,
                cargoNum: {}
            };
        },
        mounted() {
            setTimeout(() => {
                let org = this.$store.state.user.currentUser.org;
                this.name = org && org.name;
                this.year.search_EQ_orgId = org && org.id;
                this.onPort.search_EQ_orgId = org && org.id;
                this.week.search_EQ_orgId = org && org.id;
                this.day.search_EQ_orgId = org && org.id;
                this.cargoType.search_EQ_orgId = org && org.id;
                this.cargoName.search_EQ_orgId = org && org.id;
                let yDay = getLocalTime(new Date().getTime() - 24 * 60 * 60 * 1000, "YYYY-MM-DD");
                this.cargoName.search_GTE_dateTime = yDay;
                this.cargoName.search_LTE_dateTime = yDay;
                this.yearChart();
                this.onPortChart();
                this.weekChart();
                this.dayChart();
                this.cargoTypeChart()
                this.cargoNameChart()
            }, 500);
        },
        methods: {
            yearChart() {
                if (
                    this.year.search_EQ_orgId === "" ||
                    this.year.search_EQ_orgId === null
                ) {
                    return;
                }
                let yearData = [];
                getYear(this.$assist.copySearchConditions(this.year)).then(res => {
                    yearData = res.data.num;
                    this.yearNum = res.data
                    let yearChart = echarts.init(
                        document.getElementById("yearChart"),
                        "macarons"
                    );
                    yearChart.setOption({
                        // title: { text: "年度吞吐量" },
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                type: "shadow"
                            }
                        },
                        legend: {
                            orient: "vertical",
                            x: "left",
                            data: ["出口", "进口"]
                        },
                        xAxis: [
                            {
                                type: "category",
                                data: [
                                    "一月",
                                    "二月",
                                    "三月",
                                    "四月",
                                    "五月",
                                    "六月",
                                    "七月",
                                    "八月",
                                    "九月",
                                    "十月",
                                    "十一月",
                                    "十二月"
                                ]
                            }
                        ],
                        yAxis: [
                            {
                                type: "value"
                            }
                        ],
                        series: [
                            {
                                name: "出口",
                                type: "bar",
                                stack: "统计",
                                data: [
                                    yearData[0].out,
                                    yearData[1].out,
                                    yearData[2].out,
                                    yearData[3].out,
                                    yearData[4].out,
                                    yearData[5].out,
                                    yearData[6].out,
                                    yearData[7].out,
                                    yearData[8].out,
                                    yearData[9].out,
                                    yearData[10].out,
                                    yearData[11].out
                                ],
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside"
                                    }
                                }
                            },
                            {
                                name: "进口",
                                type: "bar",
                                stack: "统计",
                                data: [
                                    yearData[0].in,
                                    yearData[1].in,
                                    yearData[2].in,
                                    yearData[3].in,
                                    yearData[4].in,
                                    yearData[5].in,
                                    yearData[6].in,
                                    yearData[7].in,
                                    yearData[8].in,
                                    yearData[9].in,
                                    yearData[10].in,
                                    yearData[11].in
                                ],
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside"
                                    }
                                }
                            },
                            {
                                data: [
                                    yearData[0].out + yearData[0].in,
                                    yearData[1].out + yearData[1].in,
                                    yearData[2].out + yearData[2].in,
                                    yearData[3].out + yearData[3].in,
                                    yearData[4].out + yearData[4].in,
                                    yearData[5].out + yearData[5].in,
                                    yearData[6].out + yearData[6].in,
                                    yearData[7].out + yearData[7].in,
                                    yearData[8].out + yearData[8].in,
                                    yearData[9].out + yearData[9].in,
                                    yearData[10].out + yearData[10].in,
                                    yearData[11].out + yearData[11].in
                                ],
                                type: "line",
                                itemStyle: { normal: { label: { show: true } } }
                            }
                        ]
                    });
                });
            },
            onPortChart() {
                if (
                    this.onPort.search_EQ_orgId === "" ||
                    this.onPort.search_EQ_orgId === null
                ) {
                    return;
                }
                getOnPort(this.$assist.copySearchConditions(this.onPort)).then(
                    res => {
                        let arr = res.data.onPort;
                        let ck = { name: "出口重箱", totalNum: 0 };
                        let jk = { name: "进口重箱", totalNum: 0 };
                        let kx = { name: "空箱", totalNum: 0 };
                        for (let i = 0; i < arr.length; i++) {
                            const element = arr[i];
                            if (element.type === "CKZX") {
                                ck.totalNum = element.totalNum;
                            } else if (element.type === "JKZX") {
                                jk.totalNum = element.totalNum;
                            } else if (element.type === "KX") {
                                kx.totalNum = element.totalNum;
                            }
                        }
                        this.inPortNum = ck.totalNum + jk.totalNum + kx.totalNum
                        let onPortChart = echarts.init(
                            document.getElementById("onPortChart"),
                            "macarons"
                        );
                        onPortChart.setOption({
                            // title: { text: "在港箱数量" },
                            tooltip: {
                                trigger: "item",
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            legend: {
                                orient: "vertical",
                                x: "left",
                                data: [jk.name, ck.name, kx.name]
                            },
                            series: [
                                {
                                    name: "在港箱数量",
                                    type: "pie",
                                    radius: "75%",
                                    center: ["50%", "50%"],
                                    data: [
                                        { value: jk.totalNum, name: jk.name },
                                        { value: ck.totalNum, name: ck.name },
                                        { value: kx.totalNum, name: kx.name }
                                    ],
                                    label: {
                                        normal: {
                                            show: true,
                                            position: "inside",
                                            formatter: "{b}:{c}"
                                        }
                                    }
                                }
                            ]
                        });
                    }
                );
            },
            weekChart() {
                if (
                    this.week.search_EQ_orgId === "" ||
                    this.week.search_EQ_orgId === null
                ) {
                    return;
                }
                // let yDay = getLocalTime(new Date().getTime()-24*60*60*1000*7,'YYYY-MM-DD')
                this.week.search_GTE_dateTime = getLocalTime(
                    new Date().getTime() - 24 * 60 * 60 * 1000 * 6,
                    "YYYY-MM-DD"
                );
                this.week.search_LTE_dateTime = getLocalTime(
                    new Date(),
                    "YYYY-MM-DD"
                );
                getWeek(this.$assist.copySearchConditions(this.week)).then(res => {
                    let weekIn = res.data.aaData[0].in;
                    let weekInNum = res.data.aaData[0].num;
                    let weekOut = res.data.aaData[1].out;
                    let weekOutNum = res.data.aaData[1].num;
                    let nzrc,
                        trrk,
                        crrk,
                        nzcc,
                        trck,
                        crck = 0;
                    for (let i = 0; i < weekIn.length; i++) {
                        const el = weekIn[i];
                        if (el.type === "NZRC") {
                            nzrc = el.num;
                        } else if (el.type === "TRRK") {
                            trrk = el.num;
                        } else if (el.type === "CRRK") {
                            crrk = el.num;
                        }
                    }
                    for (let i = 0; i < weekOut.length; i++) {
                        const el = weekOut[i];
                        if (el.type === "NZCC") {
                            nzcc = el.num;
                        } else if (el.type === "TRCK") {
                            trck = el.num;
                        } else if (el.type === "CRCK") {
                            crck = el.num;
                        }
                    }
                    this.weekNum = weekInNum + weekOutNum
                    let weekChart = echarts.init(
                        document.getElementById("weekChart"),
                        "macarons"
                    );
                    weekChart.setOption({
                        // title: { text: "本周进出口量" },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: "vertical",
                            x: "left",
                            data: [
                                "火车出库",
                                "汽车出库",
                                "内转出库",
                                "火车入库",
                                "汽车入库",
                                "内转入场"
                            ]
                        },
                        series: [
                            {
                                name: "本周进出口量",
                                type: "pie",
                                radius: [0, "40%"],
                                center: ["50%", "50%"],
                                data: [
                                    { value: weekOutNum, name: "出口" },
                                    { value: weekInNum, name: "进口" }
                                ],
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside",
                                        formatter: "{b}\n{c}"
                                    }
                                }
                            },
                            {
                                name: "本周进出口量",
                                type: "pie",
                                radius: ["40%", "75%"],
                                data: [
                                    { value: trck, name: "火车出库" },
                                    { value: crck, name: "汽车出库" },
                                    { value: nzcc, name: "内转出库" },
                                    { value: trrk, name: "火车入库" },
                                    { value: crrk, name: "汽车入库" },
                                    { value: nzrc, name: "内转入场" }
                                ],
                                label: {
                                    normal: {
                                        formatter: ' {b|{b}：}{c}  ',
                                        rich: {
                                            a: {
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            b: {
                                                fontSize: 12,
                                                lineHeight: 33
                                            },
                                        }
                                    }
                                }
                                // label: {
                                //     normal: {
                                //         show: true,
                                //         position: "inside",
                                //         formatter: function(params, option) {
                                //             const data = params.data;
                                //             if (data.value === undefined) {
                                //                 data.name = "";
                                //                 data.value = "";
                                //             }
                                //             return data.name + "\n" + data.value;
                                //         }
                                //     }
                                // }
                            }
                        ]
                    });
                });
            },
            dayChart() {
                if (this.day.search_EQ_orgId === "" || this.day.search_EQ_orgId === null) {
                    return;
                }
                let yDay = getLocalTime(new Date().getTime() - 24 * 60 * 60 * 1000, "YYYY-MM-DD");
                this.day.search_GTE_dateTime = yDay;
                this.day.search_LTE_dateTime = yDay;
                getWeek(this.$assist.copySearchConditions(this.day)).then(res => {
                    let dayIn = res.data.aaData[0].in;
                    let dayInNum = res.data.aaData[0].num;
                    let dayOut = res.data.aaData[1].out;
                    let dayOutNum = res.data.aaData[1].num;
                    this.dayNum = dayInNum + dayOutNum
                    let nzrc,
                        trrk,
                        crrk,
                        nzcc,
                        trck,
                        crck = 0;
                    for (let i = 0; i < dayIn.length; i++) {
                        const el = dayIn[i];
                        if (el.type === "NZRC") {
                            nzrc = el.num;
                        } else if (el.type === "TRRK") {
                            trrk = el.num;
                        } else if (el.type === "CRRK") {
                            crrk = el.num;
                        }
                    }
                    for (let i = 0; i < dayOut.length; i++) {
                        const el = dayOut[i];
                        if (el.type === "NZCC") {
                            nzcc = el.num;
                        } else if (el.type === "TRCK") {
                            trck = el.num;
                        } else if (el.type === "CRCK") {
                            crck = el.num;
                        }
                    }
                    let dayChart = echarts.init(
                        document.getElementById("dayChart"),
                        "macarons"
                    );
                    dayChart.setOption({
                        // title: { text: "昨天进出口量" },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: "vertical",
                            x: "left",
                            data: [
                                "火车出库",
                                "汽车出库",
                                "内转出库",
                                "火车入库",
                                "汽车入库",
                                "内转入场"
                            ]
                        },
                        series: [
                            {
                                name: "昨天进出口量",
                                type: "pie",
                                radius: [0, "40%"],
                                center: ["50%", "50%"],
                                // label: {
                                //     normal: {
                                //         position: "inner"
                                //     }
                                // },
                                labelLine: {
                                    normal: {
                                        show: true
                                    }
                                },
                                data: [
                                    { value: dayOutNum, name: "出口" },
                                    { value: dayInNum, name: "进口" }
                                ],
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside",
                                        formatter: "{b}\n{c}"
                                    }
                                }
                            },
                            {
                                name: "昨天进出口量",
                                type: "pie",
                                radius: ["40%", "75%"],
                                data: [
                                    { value: trck, name: "火车出库" },
                                    { value: crck, name: "汽车出库" },
                                    { value: nzcc, name: "内转出库" },
                                    { value: trrk, name: "火车入库" },
                                    { value: crrk, name: "汽车入库" },
                                    { value: nzrc, name: "内转入场" }
                                ],
                                label: {
                                    normal: {
                                        formatter: ' {b|{b}：}{c}  ',
                                        rich: {
                                            a: {
                                                color: '#999',
                                                lineHeight: 22,
                                                align: 'center'
                                            },
                                            b: {
                                                fontSize: 12,
                                                lineHeight: 33
                                            },
                                        }
                                    }
                                }
                                // label: {
                                //     normal: {
                                //         show: true,
                                //         position: "inside",
                                //         formatter: function(params, option) {
                                //             const data = params.data;
                                //             if (data.value === undefined) {
                                //                 data.name = "";
                                //                 data.value = "";
                                //             }
                                //             return data.name + "\n" + data.value;
                                //         }
                                //     }
                                // }
                            }
                        ]
                    });
                });
            },
            cargoTypeChart() {
                if (this.cargoType.search_EQ_orgId === "" || this.cargoType.search_EQ_orgId === null) {
                    return;
                }
                this.cargoType.search_GTE_dateTime = this.cargoName.search_GTE_dateTime;
                this.cargoType.search_LTE_dateTime = this.cargoName.search_LTE_dateTime;
                let params = this.$assist.copySearchConditions(this.cargoType)
                portCountCargoType(params).then(res => {
                    this.cargoNum = res.data
                    let name = [], inData = [], outData = []
                    for (let i = 0; i < res.data.num.length; i++) {
                        const el = res.data.num[i]
                        name.push(el.type)
                        inData.push(el.inNum)
                        outData.push(el.outNum)
                    }
                    console.log(name, inData, outData)
                    let cargoTypeChart = echarts.init(document.getElementById("cargoTypeChart"), "macarons");
                    cargoTypeChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['出口', '进口'],
                            left: 0,
                            orient: 'vertical',
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: name
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '进口',
                                type: 'bar',
                                data: inData,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'  // top置顶
                                    }
                                },
                            },
                            {
                                name: '出口',
                                type: 'bar',
                                data: outData,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },
                            },
                        ]
                    })
                })
            },
            cargoNameChart() {
                if (this.cargoName.search_EQ_orgId === "" || this.cargoName.search_EQ_orgId === null) {
                    return;
                }
                let params = this.$assist.copySearchConditions(this.cargoName)
                portCountCargoName(params).then(res => {
                    let name = [], data = []
                    const resData = res.data.aaData
                    for (let i = 0; i < resData.length; i++) {
                        const el = resData[i]
                        name.push(el.type)
                        data.push(el.num)
                    }
                    let cargoNameChart = echarts.init(
                        document.getElementById("cargoNameChart"),
                        "macarons"
                    );
                    cargoNameChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        title: {
                            text: '货物吞吐量排行',
                            x: 'center',
                            textStyle: {
                                color: '#1895d2'
                            }
                        },
                        legend: {
                            data: ['吞吐量'],
                            left: 0
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: name,
                                axisTick: {
                                    alignWithLabel: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '吞吐量',
                                type: 'bar',
                                barWidth: '60%',
                                data: data,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },
                            }
                        ]
                    });
                })
            },
            handleYearTime(val) {
                this.yearChart();
            },
            handleChangeCargo(val) {
                console.log(val)
                if (val) {
                    this.cargoNameChart()
                    this.cargoTypeChart()
                }
            },
            handelChangeNum(val) {
                this.cargoName.search_EQ_number = val
                this.cargoNameChart()
            }
        }
    };
</script>
<style lang="scss" scoped>
    .port-style {
        width: 48%;
        height: 420px;
        float: left;
        border: 1px solid #ddd;
        padding: 8px;
    }

    .chart-style {
        width: 100%;
        height: 360px;
    }
</style>
